<!DOCTYPE html>

<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if IE 9]><html class="ie9"><![endif]-->
<!--[if gt IE 9]><!-->
<html>
<!--<![endif]-->

<head>
    <title>选座 - 航航电影 - 一网打尽好电影</title>

    <!-- <link rel="dns-prefetch" href="//p0.meituan.net"> -->
    <!-- <link rel="dns-prefetch" href="//p1.meituan.net"> -->
    <!-- <link rel="dns-prefetch" href="//ms0.meituan.net"> -->
    <!-- <link rel="dns-prefetch" href="//s0.meituan.net"> -->
    <!-- <link rel="dns-prefetch" href="//ms1.meituan.net"> -->
    <!-- <link rel="dns-prefetch" href="//analytics.meituan.com"> -->
    <!-- <link rel="dns-prefetch" href="//report.meituan.com"> -->
    <!-- <link rel="dns-prefetch" href="//frep.meituan.com"> -->


    <meta charset="utf-8">
    <meta name="keywords" content>
    <meta name="description" content>
    <meta http-equiv="cleartype" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">

    <meta name="HandheldFriendly" content="true">
    <meta name="format-detection" content="email=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <script>
        "use strict";
        ! function() {
            var i = 0 < arguments.length && void 0 !== arguments[0] ? arguments[0] : "_Owl_",
                n = window;
            n[i] || (n[i] = {
                isRunning: !1,
                isReady: !1,
                preTasks: [],
                dataSet: [],
                use: function(i, t) {
                    this.isReady && n.Owl && n.Owl[i](t), this.preTasks.push({
                        api: i,
                        data: [t]
                    })
                },
                add: function(i) {
                    this.dataSet.push(i)
                },
                run: function() {
                    var t = this;
                    if (!this.isRunning) {
                        this.isRunning = !0;
                        var i = n.onerror;
                        n.onerror = function() {
                            this.isReady || this.add({
                                type: "jsError",
                                data: arguments
                            }), i && i.apply(n, arguments)
                        }.bind(this), (n.addEventListener || n.attachEvent)("error", function(i) {
                            t.isReady || t.add({
                                type: "resError",
                                data: [i]
                            })
                        }, !0)
                    }
                }
            }, n[i].run())
        }();
    </script>
    <script>
        var moviePrice = [[${moviePrice}]];
        cid = "c_2yzd0xp5";
        ci = 1;
        window.system = {
            "seatsPrice": {
                "1": {
                    "expression": moviePrice+"X1",
                    "price": moviePrice+""
                },
                "2": {
                    "expression": moviePrice+"X2",
                    "price": moviePrice*2+""
                },
                "3": {
                    "expression": moviePrice+"X3",
                    "price": moviePrice*3+""
                },
                "4": {
                    "expression": moviePrice+"X4",
                    "price": moviePrice*4+""
                }
            },
            "remind": "",
            "uuid": "3BF2CF80BB9211EB827ABBEFF0D04C22CD7DF33BC4D84C4ABC7F56D0A89A63C6",
            "cinemaId": 16621
        };

        window.openPlatform = '';
        window.openPlatformSub = '';
        window.$mtsiFlag = '0';
    </script>
    <link rel="stylesheet" href="../css/common.6b1d782c.css">
    <link rel="stylesheet" href="../css/cinemas-seat.b8adee6e.css">
    <link rel="stylesheet" href="../css/btn1.css">
    <!-- 引入jquery的js -->
    <script crossorigin="anonymous" src="../js/stat.88d57c80.js"></script>
    <script>
        if (window.devicePixelRatio >= 2) {
            document.write('<link rel="stylesheet" href="//s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:5788b470/image-2x.8ba7074d.css"/>')
        }
    </script>
    <style>
        @font-face {
            font-family: stonefont;
            src: url(&#x27;fonts/01e0fbdbd6b5a4bc8ba1fe8a890a649d3440.eot&#x27;);
            src: url(&#x27;fonts/01e0fbdbd6b5a4bc8ba1fe8a890a649d3440.eot#iefix&#x27;) format(&#x27; embedded-opentype&#x27; ),
                url(&#x27;fonts/f0a30a4dda64b4f8f344858115f54fc92296.woff&#x27;) format(&#x27; woff&#x27; );
        }

        .stonefont {
            font-family: stonefont;
        }
    </style>
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?703e94591e87be68cc8da0da7cbd0be2";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</head>

<body>


    <div class="header">
        <div class="header-inner">
            <a href="//maoyan.com" class="logo" data-act="icon-click">猫眼电影</a>
            <div class="city-container" data-val="{currentcityid:1 }">
                <div class="city-selected">
                    <div class="city-name">
                        西安
                        <span class="caret"></span>
                    </div>
                </div>
                <div class="city-list" data-val="{ localcityid: 1 }">
                    <div class="city-list-header">定位城市：<a class="js-geo-city" data-ci="1">西安</a></div>

                </div>
            </div>


            <div class="nav">
                <ul class="navbar">
                    <li><a href="/movie/homepage" data-act="home-click">首页</a></li>
                    <li><a href="../movie/movieAll?status=1" data-act="movies-click">电影</a></li>
                    <li><a href="../movie/cinemaAll" data-act="cinemas-click">影院</a></li>
                    <li><a href="http://www.gewara.com">演出</a></li>
                    <li><a href="/list" data-act="board-click">榜单</a></li>
                </ul>
            </div>

            <div class="user-info">
                <div class="user-avatar J-login">
                    <img src="../images/7dd82a16316ab32c8359debdb04396ef2897.png">
                    <span class="caret"></span>
                    <ul class="user-menu no-login-menu" id="myMessage">
                        <li><a href="../page/login">登录</a></li>
                    </ul>
                </div>
            </div>

            <form action="/query" target="_blank" class="search-form" data-actform="search-click">
                <input name="kw" class="search" type="search" maxlength="32" placeholder="找影视剧、影人、影院" autocomplete="off">
                <input class="submit" type="submit" value>
            </form>

            <div class="app-download">
                <a href="/app" target="_blank">
                    <span class="iphone-icon"></span>
                    <span class="apptext">APP下载</span>
                    <span class="caret"></span>
                    <div class="download-icon">
                        <p class="down-title">扫码下载APP</p>
                        <p class="down-content">选座更优惠</p>
                    </div>
                </a>
            </div>

        </div>
    </div>
    <div class="header-placeholder"></div>


    <div class="container" id="app">
        <div class="order-progress-bar">
            <div class="step first done">
                <span class="step-num">1</span>
                <div class="bar"></div>
                <span class="step-text">选择影片场次</span>
            </div>
            <div class="step done">
                <span class="step-num">2</span>
                <div class="bar"></div>
                <span class="step-text">选择座位</span>
            </div>
            <div class="step ">
                <span class="step-num">3</span>
                <div class="bar"></div>
                <span class="step-text">14分钟内付款</span>
            </div>
            <div class="step last ">
                <span class="step-num">4</span>
                <div class="bar"></div>
                <span class="step-text">影院取票观影</span>
            </div>
        </div>


        <div class="main clearfix">
            <div class="hall">
                <div class="seat-example">
                    <div class="selectable-example example">
                        <span>可选座位</span>
                    </div>
                    <div class="sold-example example">
                        <span>已售座位</span>
                    </div>
                    <div class="selected-example example">
                        <span>已选座位</span>
                    </div>
                </div>


                <div class="seats-block" data-cols="11" data-section-id="0000000000000001" data-section-name="普通区" data-seq-no="202105240478926">
                    <div class="row-id-container">
                        <span id="rowSpan"></span>
                    </div>

                    <div class="seats-container">
                        <div class="screen-container">
                            <div class="screen">银幕中央</div>
                            <div class="c-screen-line"></div>
                        </div>

                        <div class="seats-wrapper">
                            <span id="seatInfoSpan"></span> <!--座位 描述-->
                        </div>
                    </div>
                </div>

            </div>

            <div class="side">
                <span id="programInfo"></span>


                <div class="ticket-info">
                    <div class="no-ticket">
                        <p class="buy-limit">座位：一次最多选4个座位</p>
                        <p class="no-selected">请<span>点击左侧</span>座位图选择座位</p>
                    </div>
                    <div class="has-ticket" style="display:none">
                        <span class="text" id="qweqwe">座位：</span>
                        <div class="ticket-container" data-limit="4"></div>
                    </div>

                    <div class="total-price">
                        <span>总价 :</span>
                        <span class="price" id="moviePriceSpan">0</span>
                    </div>
                </div>

                <div class="confirm-order">
                    <div id="iLoginComp" style="display: none"></div>
                    <span id="strButton"></span><!--购票 按钮-->
                </div>
            </div>
        </div>
        <div class="modal-container" style="display:none">
            <div class="modal">
                <span class="icon"></span>

                <p class="tip"></p>

                <div class="ok-btn btn">我知道了</div>
            </div>
        </div>

        <script src="../js/index.min.js"></script>
    </div>

    <div class="footer">
        <p class="friendly-links">
            关于猫眼 :
            <a href="http://ir.maoyan.com/s/index.php#pageScroll0" target="_blank">关于我们</a>
            <span></span>
            <a href="http://ir.maoyan.com/s/index.php#pageScroll1" target="_blank">管理团队</a>
            <span></span>
            <a href="http://ir.maoyan.com/s/index.php#pageScroll2" target="_blank">投资者关系</a>
            &nbsp;&nbsp;&nbsp;&nbsp;
            友情链接 :
            <a href="http://www.meituan.com" data-query="utm_source=wwwmaoyan" target="_blank">美团网</a>
            <span></span>
            <a href="http://www.gewara.com" data-query="utm_source=wwwmaoyan">格瓦拉</a>
            <span></span>
            <a href="http://i.meituan.com/client" data-query="utm_source=wwwmaoyan" target="_blank">美团下载</a>
            <span></span>
            <a href="https://www.huanxi.com" data-query="utm_source=maoyan_pc" target="_blank">欢喜首映</a>
        </p>
        <p class="friendly-links">
            商务合作邮箱：v@maoyan.com
            客服电话：10105335
            违法和不良信息举报电话：4006018900
        </p>
        <p class="friendly-links">
            用户投诉邮箱：tousujubao@meituan.com
            舞弊线索举报邮箱：wubijubao@maoyan.com
        </p>
        <p class="friendly-links  credentials">
            <a href="/about/licence/1" target="_blank">中华人民共和国增值电信业务经营许可证 京B2-20190350</a>
            <span></span>
            <a href="/about/licence/4" target="_blank">营业性演出许可证 京演（机构）（2019）4094号</a>
        </p>
        <p class="friendly-links  credentials">
            <a href="/about/licence/3" target="_blank">广播电视节目制作经营许可证 （京）字第08478号</a>
            <span></span>
            <a href="/about/licence/2" target="_blank">网络文化经营许可证 京网文（2019）3837-369号 </a>
        </p>
        <p class="friendly-links  credentials">
            <a href="/rules/agreement" target="_blank">猫眼用户服务协议 </a>
            <span></span>
            <a href="/rules/rule" target="_blank">猫眼平台交易规则总则 </a>
            <span></span>
            <a href="/rules/privacy" target="_blank">隐私政策 </a>
        </p>
        <p class="friendly-links  credentials">
            <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010102003232" target="_blank">京公网安备
                11010102003232号</a>
            <span></span>
            <a href="http://www.beian.miit.gov.cn/" target="_blank">京ICP备16022489号-1</a>
        </p>
        <p>北京猫眼文化传媒有限公司</p>
        <p>
            &copy;<span class="my-footer-year">2016</span>
            猫眼电影 maoyan.com</p>
        <div class="certificate">
            <a href="http://sq.ccm.gov.cn:80/ccnt/sczr/service/business/emark/toDetail/350CF8BCA8416C4FE0530140A8C0957E" target="_blank">
                <img src="../images/e54374ccf134d1f7b2c5b075a74fca525326.png">
            </a>
            <a href="/about/licence/5" target="_blank">
                <img src="../images/805f605d5cf1b1a02a4e3a5e29df003b8376.png">
            </a>
            <a href="https://www.12377.cn" target="_blank">
                <img src="../images/3cd2a9b7dc179531d20d27a5fd686e783787.png">
            </a>
        </div>
    </div>

    <script crossorigin="anonymous" src="../js/owl_1.7.11.js"></script>
    <script>
        Owl.start({
            project: 'com.sankuai.movie.fe.mywww',
            pageUrl: location.href.split('?')[0].replace(/\/\d+/g, '/:id'),
            devMode: false
        })
    </script>
    <!--[if IE 8]><script crossorigin="anonymous" src="//s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:5788b470/es5-shim.bbad933f.js"></script><![endif]-->
    <!--[if IE 8]><script crossorigin="anonymous" src="//s3plus.meituan.net/v1/mss_e2821d7f0cfe4ac1bf9202ecf9590e67/cdn-prod/file:5788b470/es5-sham.d6ea26f4.js"></script><![endif]-->
    <script crossorigin="anonymous" src="../js/common.f4713c37.js"></script>
    <script crossorigin="anonymous" src="../js/cinemas-seat.310c6744.js"></script>
</body>
<script>
    $(function(){ // 页面 加载事件
        programByprogramId(); // 选座页面 电影详情
        seatInfo(); // 电影描述
        myMessage();
    })
    function programByprogramId() {
        $.ajax({
            url:"../lzyConsumer/programByprogramId",
            data:{programId:[[${programId}]]},
            success:function (data) {
                var date =  new Date(data.date);
                var dateMonth =  (date.getMonth() + 1)+"月"+date.getDate()+"日"
                var datesys = date.getHours()+""+date.getMinutes();
                var playStartTime2 =  data.playStartTime.substr(0,2)+""+data.playStartTime.substr(3,2);
                var str = '';
                    str += '<div class="movie-info clearfix">\n' +
                        '                    <div class="poster">\n' +
                        '                        <img src="'+data.movieImg+'">\n' +
                        '                    </div>\n' +
                        '                    <div class="content">\n' +
                        '                        <p class="name text-ellipsis">'+data.movieName+'</p>\n' +
                        '                        <div class="info-item">\n' +
                        '                            <span>类型 :</span>\n' +
                        '                            <span class="value">'+data.typename+'</span>\n' +
                        '                        </div>\n' +
                        '                        <div class="info-item">\n' +
                        '                            <span>时长 :</span>\n' +
                        '                            <span class="value">'+data.moviedate+'</span>\n' +
                        '                        </div>\n' +
                        '                    </div>\n' +
                        '                </div>\n' +
                        '\n' +
                        '                <div class="show-info">\n' +
                        '                    <div class="info-item">\n' +
                        '                        <span>影院 :</span>\n' +
                        '                        <span class="value text-ellipsis">'+data.cinema+'</span>\n' +
                        '                    </div>\n' +
                        '                    <div class="info-item">\n' +
                        '                        <span>影厅 :</span>\n' +
                        '                        <span class="value text-ellipsis">'+data.hallname+'</span>\n' +
                        '                    </div>\n' +
                        '                    <div class="info-item">\n' +
                        '                        <span>版本 :</span>\n' +
                        '                        <span class="value text-ellipsis">'+data.movieLanguage+'</span>\n' +
                        '                    </div>\n' +
                        '                    <div class="info-item">\n' +
                        '                        <span>场次 :</span>\n' +
                        '                        <span class="value text-ellipsis screen">今天 '+dateMonth+'   '+data.playStartTime+'</span>\n' +
                        '                    </div>\n' +
                        '                    <div class="info-item">\n' +
                        '                        <span>票价 :</span>\n' +
                        '                        <span class="value text-ellipsis">￥'+data.moviePrice+'/张</span>\n' +
                        '                    </div>\n' +
                        '                </div>';
                    var strButton = '';
                        strButton += '\n' +
                            '\t<div id="wrap" onclick="buyTicket('+playStartTime2+','+data.movieid+','+data.cinemaid+','+data.programId+')">\n' +
                            '\t\t<a href="#" class="btn-slide2">\n' +
                            '\t\t  <span class="circle2"><i class="fa fa-download"></i></span>\n' +
                            '\t\t  <span class="title2" >购票</span> \n' +
                            '\t\t  <span class="title-hover2" >点击购票</span>\n' +
                            '\t\t</a>\n' +
                            '\t</div>';
                    $("#programInfo").html(str);
                     $("#strButton").html(strButton);
            }
        })
    }
    function buyTicket(playStartTime2,movieid,cinemaid,programId) {
        /*alert($("#moviePriceSpan").text()) // 电影的总价*/
        var date  = new Date();
        var datesys = date.getHours()+""+date.getMinutes();
        if (parseInt(datesys) < parseInt(playStartTime2)){
            $.ajax({
                url:'../lzyConsumer/buyTicketLogin',
                success:function (data) {
                    if (data == '登录'){ // 假设现在登录了
                        var state =  [];  // 选定的座位号座位号
                        state = $(".ticket").text();
                        var seatInfo = "";
                        for (var i = 0; i < state.length; i++) {
                            seatInfo +=  state[i];
                            if (i != state.length -1){
                                if ((i+1) %5 == 0){
                                    seatInfo += ",";
                                }
                            }
                        }
                        var orderPrice = $("#moviePriceSpan").text(); // 票价
                        if (state != null && state != ''){
                            $.ajax({
                                url:'../lzyConsumer/createOrder',
                                data:{programId:programId,state:seatInfo,orderPrice:orderPrice},
                                success:function (data) {
                                    location.href="../cinemaInfoPage/orderInfo?phone="+data.phone+"&orderId="+data.orderId;
                                }
                            })
                        }else{
                            alert('请至少选择一个座位');  // 弹框待完善
                        }
                    }else{
                        alert(data);
                        location.href="../page/login";
                    }
                }
            })
        }else{
            alert("当前影厅电影已经开始播放,请选择其他影厅")
            location.href='../cinemaInfoPage/cinemaInfo?cinemaId='+cinemaid+'&movieId='+movieid+'';
        }
    }

    function seatInfo() {// 座位描述 调方法
        $.ajax({
            url:'../lzyConsumer/seatInfo',
            data:{programId:[[${programId}]]},
            success:function(data){
                var str = '';
                var rowStr = '';
                for (var i = 1; i < data.movieHall.row +1; i++) {
                    rowStr += '<span class="row-id" >'+i+'</span>'
                    str += '<div class="row">\n'
                    for (var j = 1; j < data.movieHall.column +1; j++) {
                      str+=  '     <span id="'+i+''+j+'" class="seat selectable" data-column-id="0'+j+'" data-row-id="'+i+'" data-no="0000000000000001-'+i+'-0'+j+'" data-st="N" data-act="seat-click" data-bid="b_s7eiiijf"></span>\n';
                    }
                       str +=  '   </div>';
                }
                $("#rowSpan").html(rowStr);
                $("#seatInfoSpan").html(str);
                for (var i = 0; i < data.listSeat.length; i++) {
                    if (data.listSeat[i].status == 1){
                        $("#"+data.listSeat[i].xy+"").prop("class","seat sold");
                    }
                }
            }
        })
    }
    //判断登录内容
    function myMessage(){
        $.ajax({
            url:"../user/loginSession",
            type:"get",
            success:function(data){
                var str="";
                if( data != ""  ){
                    str+="<li><a href='../page/myMessage?stu=1' data-act=\"board-click\">我的订单</a></li>";
                    str+="<li><a href='../page/myMessage?stu=2' data-act=\"board-click\">基本信息</a></li>";
                    str+="<li><a href='../page/logout' data-act=\"movies-click\">退出登录</a></li>";

                    $("#portrait").prop("src",data.img)
                    $("#myMessage").html(str);
                }

            }
        })
    }
</script>
</html>